<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_页面固定广告条</title>
    <style>
        .top{
            background-color: #5aa4ae;
            height: 120px;
            font-size: 30px;
            color: #fff;
            position: fixed;
            /*使用固定定位后，元素会脱离文档流，释放布局空间，不再支撑父元素的高度，也无法再继承父元素的宽度，
            所以可以自设宽度为100%的视口(viewport)宽度，也就是全屏宽*/
            width: 100vw;
            top: 0;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是网页内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus laudantium, molestiae. Autem consequatur
            deleniti earum exercitationem qui recusandae rerum sed sunt. Alias debitis eum fugit quisquam reprehenderit
            temporibus ut voluptatibus.
        </div>
        <div>Ab doloremque, dolores doloribus explicabo facilis id illo iusto laboriosam, libero obcaecati quasi,
            quisquam sapiente sed soluta totam. Aperiam, eveniet hic impedit natus neque quam voluptatem? Debitis
            praesentium quis tempora.
        </div>
        <div>Aliquid at atque beatae, commodi consectetur ducimus exercitationem fugiat hic illo laboriosam, maiores
            minus nostrum obcaecati possimus quaerat recusandae sequi similique sint totam ullam? Incidunt molestiae quo
            repudiandae rerum sit!
        </div>
        <div>Blanditiis corporis doloribus exercitationem incidunt libero nam odio pariatur quis rerum voluptatem?
            Accusantium adipisci aut autem, cum ipsum itaque magnam magni officiis pariatur provident? Adipisci aliquid
            blanditiis deserunt perspiciatis temporibus.
        </div>
        <div>Adipisci alias amet animi aspernatur dicta distinctio, exercitationem, facilis fugit illum iste minima
            molestias mollitia nihil officiis omnis perferendis quasi quidem repellat rerum sequi sint sit, tempore
            totam veniam voluptas.
        </div>
        <div>A, adipisci culpa cum deleniti enim facere laboriosam laudantium nam nobis omnis pariatur provident
            reprehenderit sit soluta tempora? Alias aspernatur beatae, dicta dolores impedit perspiciatis ratione
            recusandae sed velit veniam.
        </div>
        <div>Ea eveniet porro praesentium quos rerum tempore unde. Aut consectetur dignissimos distinctio dolor eius,
            ex, expedita incidunt iure libero maxime nam officiis optio provident reiciendis reprehenderit velit
            voluptate. Doloribus, error.
        </div>
        <div>Assumenda eum facilis iste molestias sint. Dignissimos incidunt inventore ipsa vel velit! A ad debitis
            dolores ducimus explicabo illum laborum, laudantium maxime odio odit quasi qui quibusdam, ratione suscipit,
            velit.
        </div>
        <div>Accusantium asperiores assumenda at corporis culpa, est fuga natus odit officia praesentium recusandae,
            repellendus sint sit. A amet culpa, cupiditate ducimus, illum iusto laudantium minima, molestias nemo
            ratione sapiente voluptatum?
        </div>
        <div>Animi laboriosam officia ut vero voluptate. Accusamus blanditiis consectetur consequatur cumque delectus
            eaque eius eligendi est incidunt ipsa iusto laborum libero molestias nam, natus officia porro, provident
            quidem, sunt voluptate!
        </div>
        <div>Aliquam consequuntur dignissimos ea eum eveniet ex fugit inventore laudantium magni molestiae nam natus
            non, pariatur, porro quaerat quas quod rem repellat reprehenderit sapiente, suscipit velit voluptatibus
            voluptatum? Aliquam, possimus.
        </div>
        <div>Animi assumenda blanditiis, eos error et explicabo impedit incidunt iste molestias mollitia qui repellendus
            ut, voluptate! Ab aperiam corporis illo magni maxime quasi ratione, veritatis voluptatum. Hic neque nisi
            vel.
        </div>
        <div>Adipisci aliquid natus nesciunt officiis omnis quisquam, repellat. Alias aspernatur deleniti dicta eaque
            fugit nesciunt praesentium? Ad animi atque corporis cumque cupiditate delectus eum expedita iste provident,
            quas, sed velit!
        </div>
        <div>Alias consectetur cum ducimus expedita impedit officia quae sint. Dolores eaque illum nobis reprehenderit
            saepe sit sunt! Ab alias assumenda corporis eum facere fugiat non sapiente sunt temporibus voluptas.
            Inventore.
        </div>
        <div>Assumenda, atque blanditiis, deserunt excepturi, fuga hic inventore nemo nisi odit provident quaerat quis
            soluta unde! Aliquid commodi dolorum harum sequi! Consectetur deserunt eius exercitationem ipsam itaque
            nostrum quidem sint!
        </div>
        <div>At, consequuntur eligendi enim, error est impedit magnam mollitia, non quam quia quidem sint sunt tempora
            totam ut voluptatem voluptates? Harum impedit iure repellat sapiente. Culpa eum harum iusto vero?
        </div>
        <div>Ab aliquid asperiores aspernatur deserunt eligendi esse expedita facilis fuga incidunt laudantium maiores
            nihil obcaecati odio perspiciatis possimus quaerat quia rem, repudiandae sapiente ullam! Blanditiis
            explicabo qui rem sint voluptates?
        </div>
        <div>Accusamus amet consectetur distinctio dolor dolore excepturi, fuga illo inventore ipsa laboriosam
            laudantium nihil nisi nostrum officiis placeat porro qui recusandae repudiandae rerum sit soluta tenetur
            velit vitae voluptas, voluptatem?
        </div>
        <div>A aliquam assumenda deleniti, dolor dolores dolorum enim esse expedita, in ipsa laboriosam molestiae nam
            nihil quod saepe, tempore ullam velit voluptatum. Aperiam ipsa laboriosam magnam perferendis recusandae
            sequi, sunt.
        </div>
        <div>At doloremque, harum illo impedit inventore iste magni maxime, minus molestias optio quas quisquam
            recusandae repudiandae soluta, sunt ullam veritatis voluptas? Blanditiis corporis debitis, dignissimos
            fugiat neque rem repellat sunt!
        </div>
        <div>Atque dignissimos dolorem eaque, eius eum, fuga illum, ipsum minus praesentium provident quas tempora
            veritatis vero. Asperiores, consectetur cupiditate, doloribus expedita fugiat in itaque maiores nam,
            nesciunt quidem vero voluptate?
        </div>
        <div>Accusantium animi consectetur, cum debitis, dolore fugit ipsam iste modi omnis quae quaerat quas quo totam
            voluptas voluptates! Aliquid aperiam at enim nesciunt officia porro qui sit? Facere, impedit, quas.
        </div>
        <div>A aperiam aut consequuntur cupiditate debitis delectus dolores esse expedita facilis, fugit illo laborum
            maiores minus molestiae necessitatibus nihil nisi nobis non optio quaerat quis rem repellendus soluta sunt
            suscipit.
        </div>
        <div>Beatae excepturi explicabo facere illo inventore ipsa officia sapiente, voluptatum. A ab accusantium
            asperiores autem blanditiis cumque deleniti distinctio et exercitationem expedita libero, mollitia natus
            officia repudiandae similique, sit, tempore?
        </div>
        <div>Adipisci architecto aspernatur at autem beatae commodi culpa delectus dignissimos ducimus eaque eligendi
            explicabo inventore laborum maxime, minima minus nobis obcaecati officia, porro provident quas qui quidem
            sunt temporibus totam.
        </div>
        <div>Assumenda consectetur, culpa dolor eius error fuga fugit, incidunt laboriosam laborum minima nostrum
            pariatur reprehenderit sequi totam vero. Blanditiis culpa laudantium magni maiores minima placeat possimus
            quidem sit totam voluptate?
        </div>
        <div>Atque cupiditate distinctio dolores eveniet laborum molestiae nisi officiis omnis praesentium rerum.
            Aperiam, asperiores cupiditate dicta dolore dolorem eligendi eum expedita facere incidunt nihil, officia
            reprehenderit sit temporibus, vero voluptatibus!
        </div>
        <div>Accusamus aliquam impedit necessitatibus numquam velit vero vitae voluptas. Atque consequuntur cumque
            dolore eligendi fugit provident quam quis ut velit voluptatem? Accusantium architecto consectetur, eius ex
            itaque magni minus ullam.
        </div>
        <div>Aliquid assumenda aut consectetur debitis delectus dicta dolore eaque, exercitationem iure maxime mollitia
            nisi nobis officia praesentium recusandae totam voluptatibus. Cupiditate eligendi eum eveniet impedit ipsam
            quasi similique. Recusandae, sed?
        </div>
        <div>Accusamus aliquam aspernatur assumenda consectetur consequuntur corporis culpa cum, doloribus
            exercitationem iste nihil non officiis perferendis quasi quia quidem quo rerum saepe sequi soluta sunt
            veritatis vero vitae voluptate voluptatum.
        </div>
        <div>Beatae eius harum magnam molestiae omnis provident similique suscipit unde voluptatibus voluptatum.
            Accusamus adipisci alias asperiores consequuntur corporis debitis laborum nam nisi nostrum, quam recusandae
            reprehenderit sed, totam veniam voluptas!
        </div>
        <div>Architecto aut ducimus, exercitationem neque nihil perferendis possimus provident qui reiciendis suscipit?
            Accusamus, aspernatur culpa, cum earum enim exercitationem facere iusto magnam maxime porro, rerum similique
            tempore tenetur ullam vitae.
        </div>
        <div>A deserunt ea ipsa nisi obcaecati qui quis, quos recusandae suscipit totam? Ab accusamus aperiam autem
            distinctio, ex in ipsam laborum omnis quaerat, quasi quo quos saepe suscipit, unde veritatis.
        </div>
        <div>Accusamus consectetur, dicta doloribus eius id illum ipsam iusto labore laudantium maxime modi molestiae
            neque nulla numquam officia quaerat quibusdam quos recusandae repudiandae saepe, temporibus totam unde
            voluptatibus. Esse, veritatis!
        </div>
        <div>Accusantium delectus dolorum ducimus eligendi, error esse ex explicabo fuga hic magni mollitia natus
            necessitatibus nihil nulla odio odit officiis pariatur perspiciatis, porro ratione rem vel voluptatem! Ad,
            libero, provident?
        </div>
        <div>Aliquid consequatur esse eum facilis inventore modi necessitatibus, odit sint tenetur veritatis. Aperiam
            atque cupiditate expedita inventore non quis reprehenderit rerum. Accusamus alias aspernatur ducimus hic
            ipsam nam natus officiis!
        </div>
        <div>Ab delectus dolorum enim excepturi itaque nihil perspiciatis vitae voluptatem? Dicta fuga laboriosam maxime
            minus quas! Ab, animi aperiam assumenda, aut cumque laboriosam minima minus nulla, quibusdam saepe sapiente
            tempore?
        </div>
        <div>Aspernatur assumenda beatae debitis ducimus eos nihil qui quibusdam ullam! Minima saepe tempore vero
            voluptatem? Adipisci dignissimos dolorem doloremque eligendi hic minus, neque vero? Deleniti esse labore
            maiores perferendis voluptatibus.
        </div>
        <div>Esse in, sit? Deleniti ducimus earum excepturi fuga itaque, laboriosam natus neque numquam, obcaecati omnis
            provident quos reiciendis sint velit voluptas. Alias eum laboriosam necessitatibus nostrum odit quis
            veritatis. Labore.
        </div>
        <div>Amet aperiam corporis dolore ducimus ea eveniet facere facilis laborum minus non pariatur, quam qui sunt
            tempora tempore unde voluptas. Corporis dolores iure magnam nesciunt nobis nulla quia ullam velit.
        </div>
        <div>Ab corporis culpa cumque facere in maiores molestiae omnis, placeat quis rem, repellendus, similique veniam
            voluptate. Adipisci cupiditate deserunt distinctio dolor eius enim laboriosam, quae quas repudiandae, totam
            velit vitae?
        </div>
        <div>Aspernatur in nemo officiis rem vero! At delectus expedita, harum maiores neque quisquam saepe. Ab
            accusamus aliquam consectetur delectus facere fugit illo in inventore, minus neque nihil nostrum
            perspiciatis voluptate?
        </div>
        <div>Aperiam autem consectetur culpa dolores error exercitationem facilis fugiat iure iusto laborum magnam magni
            nesciunt officia, perferendis placeat provident quidem quis repellat sapiente suscipit tenetur veniam vero
            voluptatibus? Deleniti, minima?
        </div>
        <div>Aspernatur beatae culpa dignissimos doloribus ducimus eaque eos eveniet expedita fuga fugit in ipsum
            laudantium maxime neque nesciunt nobis, quas reprehenderit rerum similique veritatis voluptas voluptate
            voluptatum! Ipsa, qui, quo?
        </div>
        <div>Alias animi aspernatur autem cupiditate eaque eius eum fugit, in ipsa itaque iure iusto maxime minus
            molestias necessitatibus, nemo, odio perferendis porro possimus repellendus rerum similique soluta suscipit
            tempora voluptate?
        </div>
        <div>Alias aperiam aut consequuntur dolore ea eius, eveniet ex facere in magni minima nemo nihil nisi
            perspiciatis quod ratione recusandae tempore ullam! Architecto consequatur ducimus libero repellat,
            temporibus ut voluptate!
        </div>
        <div>Cupiditate eos obcaecati totam? Aliquid assumenda atque beatae, commodi cumque cupiditate deleniti
            dignissimos dolores earum eius, eum excepturi facilis harum iure, nisi nostrum perspiciatis quis quo
            repellendus totam vitae voluptatibus?
        </div>
        <div>Cumque doloremque, eaque libero maiores possimus repellat rerum similique tempore temporibus! Alias
            architecto atque ea expedita, facere impedit incidunt maxime minus numquam optio quibusdam soluta velit
            voluptas voluptatem voluptatibus voluptatum.
        </div>
        <div>Ab, debitis dignissimos in maxime praesentium repellendus vel? Excepturi impedit officia perferendis sunt.
            Ab consequuntur corporis dolor eligendi error inventore maiores, molestias natus quaerat, qui quisquam,
            suscipit. Delectus optio, quos?
        </div>
        <div>Atque corporis impedit maxime natus neque possimus ratione sequi. Aliquam esse ipsa iure libero, magnam
            maxime, optio pariatur quia repellendus saepe sequi, ullam unde. Aliquid in ipsam placeat quae veniam!
        </div>
        <div>Ad aliquam asperiores aspernatur at autem beatae, consequatur corporis, cupiditate debitis dignissimos
            doloremque dolores doloribus ducimus hic, id ipsa maiores nemo nesciunt nisi nulla odit perferendis quas
            reiciendis suscipit voluptas?
        </div>
        <div>Accusantium architecto autem commodi distinctio dolorum eos eum expedita in incidunt ipsam iste laboriosam
            maiores necessitatibus nulla numquam obcaecati odit praesentium, quasi repellendus sequi soluta sunt veniam
            veritatis vero voluptate.
        </div>
        <div>Beatae eaque illo, maxime repudiandae tempore unde voluptas! Blanditiis cupiditate dicta facilis itaque
            mollitia nesciunt nulla officiis quam quisquam quos recusandae totam, voluptas, voluptatum. Debitis earum
            iusto odit saepe sint.
        </div>
        <div>Aliquid aperiam at consequatur, ea eligendi enim eos expedita fugiat hic illo iusto minus nesciunt, nobis
            non odit perferendis provident qui quia quibusdam reiciendis repellendus rerum sed veniam vitae voluptas.
        </div>
        <div>Ab beatae dolores eaque, est fugiat illum incidunt ipsum itaque libero magni mollitia natus nesciunt
            obcaecati pariatur, quasi saepe sed, sequi sint tempore voluptatem! Alias asperiores atque cumque ipsa
            voluptatum!
        </div>
        <div>Ad asperiores aspernatur at beatae earum enim facilis inventore molestias mollitia, numquam praesentium
            provident quaerat, quam quis quos totam, unde. Aspernatur fugiat nemo nulla omnis qui quia quo velit vitae!
        </div>
        <div>Alias consequuntur debitis delectus dolores eaque esse explicabo, hic illum impedit in ipsam molestias non
            nostrum, officia pariatur quisquam ratione rerum ut velit vitae. Dolore error quam temporibus veniam
            voluptatibus.
        </div>
        <div>Aliquid amet asperiores est ex expedita ipsum laborum obcaecati odio possimus qui quibusdam quidem, ratione
            repudiandae, sit temporibus veniam vitae. Culpa eligendi ex fuga ipsa officia omnis quaerat repellendus
            similique?
        </div>
        <div>Ad atque autem beatae commodi consectetur consequatur dignissimos doloremque dolores doloribus enim
            eveniet, impedit itaque maxime modi molestiae natus non numquam officia quod sapiente sed sit tempore
            tenetur voluptate voluptatibus!
        </div>
        <div>Aspernatur distinctio necessitatibus quasi rem similique! Ab alias aperiam commodi, consectetur cum dolorem
            enim eos libero magni molestiae praesentium quae voluptas voluptate? Commodi deleniti doloribus praesentium
            quaerat sed sit sunt.
        </div>
    </div>
</body>
</html>